<template>
    <p style="font-size: 20px;font-weight: 400;margin-bottom: 10px;">{{ $t('menu.report') }}</p>

    <!-- 头部按钮 -->
    <div class="search-box">
        <div class="flex">
            <span style="width: 120px;">作品名称:</span>
            <el-input v-model="search.searchName" clearable></el-input>
        </div>
        <div class="flex">
            <span style="width: 80px;">举报人:</span>
            <el-input v-model="search.searchValue1" clearable></el-input>
        </div>
        <div class="flex">
            <span style="width: 120px;">处理状态:</span>
            <el-select v-model="search.searchValue2" placeholder="Select">
                <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="flex">
            <span style="width: 120px;">举报类型:</span>
            <el-select v-model="search.searchValue3" placeholder="Select">
                <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </div>
        <el-button type="primary" @click="searchChange">{{ $t('data.search') }}</el-button>
        <el-button @click="resetSearch">重置</el-button>

    </div>

    <!-- 表格 -->

    <el-table :data="datas" stripe border style="height: 580px">
        <el-table-column prop="name" label="作品名称" align="center" />
        <el-table-column prop="userName" label="举报人" align="center" />
        <el-table-column prop="typeName" label="违规类型" align="center" />
        <el-table-column label="处理状态" align="center">
            <template #default="scope">
                <el-tag effect="plain" v-if="scope.row.status == 0">未处理</el-tag>
                <el-tag type="success" v-else-if="scope.row.status == 1">已处理</el-tag>
                <el-tag type="success" v-else>无违规</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="违规描述" align="center">
            <template #default="scope">
                <el-input v-model="scope.row.description" :rows="2" type="textarea" disabled />
            </template>
        </el-table-column>

        <el-table-column fixed="right" :label="$t('column.operations')" align="center">
            <template #default="scope">

                <el-button v-if="scope.row.status == 0" type="primary" size="small" @click="editShow(scope.row)">
                    处理
                </el-button>
                <el-popconfirm title="是否删除?" @confirm="delConfirm(scope.row.id)">
                    <template #reference>
                        <el-button type="danger" size="small">
                            删除
                        </el-button>
                    </template>
                </el-popconfirm>

            </template>
        </el-table-column>


    </el-table>

    <!-- 表单 -->
    <el-dialog v-model="formShow" title="处理举报" width="500">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="data" :rules="rules" label-width="auto"
            class="demo-ruleForm" status-icon>
            <el-form-item label="作品：">
                <p>{{ data.name }}</p>
            </el-form-item>
            <el-form-item label="违规类型：">
                <p>{{ data.typeName }}</p>
            </el-form-item>
            <el-form-item label="描述：">
                <p>{{ data.description }}</p>
            </el-form-item>
            <el-form-item label="处理：" prop="status">
                <el-radio-group v-model="data.status">
                    <el-radio :value="1">确认违规</el-radio>
                    <el-radio :value="2">暂无违规</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="违规作品：">
                <a :href="'http://localhost:14652/photo/' + data.photoId" target="_blank">点击查看</a>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="canelChange">{{ $t('data.cancel') }}</el-button>
                <el-button type="primary" @click="editChange(ruleFormRef)">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>


    <el-pagination style="padding-top: 30px;" background layout="total, sizes, prev, pager, next, jumper"
        :total="search.total" :page-sizes="[10, 30, 50, 100]" v-model:current-page="search.index"
        v-model:page-size="search.size" @size-change="pageChange" @current-change="currentChange" />
</template>


<script setup>
import { reactive, ref } from 'vue'
import api from './api'
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter()
const datas = ref([])
const data = ref()
const formShow = ref(false)
const type = ref('add')
const title = ref('data.add')
const ruleFormRef = ref()
const rules = reactive({
    status: [
        { pattern: /^[12]+$/, message: '请选择结果', trigger: 'blur' },
    ],
})
const types = ref([])
const status = ref([{
    value: -1,
    label: '全部'
}, {
    value: 0,
    label: '未处理'
}, {
    value: 1,
    label: '处理违规'
}, {
    value: 999,
    label: '暂无违规'
}])

const delConfirm = (id) => {
    api.delReportType(id).then(res => {
        if (res.success) {
            datas.value = datas.value.filter(x => x.id != id)
            ElMessage({ type: 'success', message: res.message })
        }
    })
}

const toPhoto = () => {
    router
}


const editChange = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            api.handleReport(data.value.id, data.value.status).then(res => {
                let type = 'error'
                if (res.success) {
                    type = 'success'
                    formShow.value = false
                    datas.value[datas.value.findIndex(x => x.id == data.value.id)] = JSON.parse(JSON.stringify(data.value))
                }
                ElMessage({
                    type: type,
                    message: res.message
                })
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const editShow = (row) => {
    data.value = JSON.parse(JSON.stringify(row))
    type.value = 'edit'
    title.value = 'data.edit'
    formShow.value = true
    console.log(data.value.status)
}

const addShow = () => {
    data.value = {
        id: 0,
        name: ''
    }
    type.value = 'add'
    title.value = 'data.add'
    formShow.value = true
}
const canelChange = () => {
    formShow.value = false
}
const search = ref({
    total: 0,
    index: 1,
    size: 10,
    searchName: '',
    searchValue1: '',
    searchValue2: -1,
    searchValue3: 0

})

const getReports = () => {
    api.getReports(search.value).then(res => {
        datas.value = res.datas
        search.value.total = res.total
        console.log(datas.value)
        console.log(search.value.total)
    })
}
getReports()

const searchChange = () => {
    getReports()
}

const pageChange = (value) => {
    search.value.size = value
    getReports()
}

const currentChange = (value) => {
    search.value.index = value
    getReports()
}

const getTypes = () => {
    api.getReportTyps({ index: 1, size: 999, searchName: '' }).then(res => {
        types.value = res.datas
        types.value.unshift({
            id: 0,
            name: '全部'
        })
    })
}
getTypes()

const resetSearch = () => {
    search.value.searchName = ''
    search.value.searchValue1 = ''
    search.value.searchValue2 = -1
    search.value.searchValue3 = 0

}
</script>


<style lang="scss">
.to {
    color: #1b31ba;
    border-bottom: #1b31ba 1px solid;
    height: 24px;
}

.to:hover {
    cursor: pointer;
}


.search-box {
    .flex {
        display: flex;
        justify-content: space-between;
        width: 260px;
        height: 30px;
        line-height: 30px;
        margin-right: 10px
    }
}
</style>